<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>任务六：基础JavaScript练习（三）</title>
		<style type="text/css">
			
			.found{
				background-color: #fff;
				color:red;
			}
			textarea{
				resize: none;
			}
			.container div{
				display: inline-block;
				float: left;
				padding:0 10px;
				margin: 5px 5px 0 0;
				height:50px;
				line-height:50px;
				background-color: #FF0000;
				color: #fff;
				font-size: 30px;
				font-weight: bold;
			}
			.container{
				overflow: auto;
			}
		
		</style>
	</head>
	<body>
		<textarea placeholder="请输入字符并用不同符号分隔" rows="5" cols="20"></textarea>
		<input type="button" value="插入" id="insert"/>
		<input type="button" value="查询" id="search"/>
		<input type="text" id="keyWord"/>
		
		<div id="container" class="container">
			
		</div>
	<script>
		var text = document.getElementsByTagName('textarea');
		var container = document.getElementById('container');

		var data = [];

		window.onload = function(){
			
			var insert = document.getElementById('insert');
			var search = document.getElementById('search');
			
			insert.onclick = function(){
				var words =text[0].value;
				words = words.replace(/[^0-9a-zA-Z]/g, ' ');
				var arr = words.split(' ');
				for(var i = 0; i < arr.length; i++){
					var oDiv = document.createElement('div');
					oDiv.innerHTML = arr[i];
					container.appendChild(oDiv);
					data.push(arr[i]);
					
				}
			}
	
			search.onclick = function(){
				var input = document.getElementById('keyWord').value;
				container.innerHTML = data.map(function(d){
					if(input != null && input.length > 0){
						d = d.replace(new RegExp(input, 'g'), '<span class="found">' + input + '</span>');
					}
					return "<div>" + d + "</div>"
				}).join('');
				
			}
			
		}
	</script>
	</body>
</html>